* {
  margin: 0;
  padding: 0;
}

#wrap {
  width: 100vw;
  height: 100vh;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-wrap {
  width: 340px;
  height: 100px;
  position: relative;
  display: flex;
}
.bag::before {
  content: '';
  position: absolute;
  display: block;
  background: #ff6969;
  /* background: radial-gradient(top 50% left 100% bottom 50%,#ff6969 40%, #888); */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  right: -30px;
  top: 25px;
  /* box-shadow: 10px 0 10px 1px #aaa inset; */
  z-index: 2;
}
.bag {
  position: relative;
  height: 100%;
  width: 240px;
  overflow: hidden;
  background: #fff;
  /* box-shadow: 0px 0 8px 1px #888; */
  border-radius: 16px 0 0 16px;
  /* filter: drop-shadow(0 0 8px #888); */
  z-index: 100;
}
.res {
  flex: 1;
  background: #ff6969;
  border-radius: 0 16px 16px 0;
}


#test{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #ff6969;
  margin-left: 20px;
  /* border-left: #888 inset 20px; */
  /* background: repeating-radial-gradient(#aaa, #888) */
  /* box-sizing: border-box; */
}